<template>
  <div class="index">
    <div class="count">
      <div><span>今 日 申 领</span><img src="../assets/images/img.png"><br>
        <p>100</p></div>
      <div><span>今 日 未 完 申 领</span><img src="../assets/images/img.png"><br>
        <p>200</p></div>
      <div><span>未 完 成 申 领</span><img src="../assets/images/img.png"><br>
        <p>300</p></div>
      <div><span>申 领 总 数</span><img src="../assets/images/img.png"><br>
        <p>400</p></div>
    </div>
    <div class="image">
      <div ref="chart" style="height: 90%"></div>
      <div ref="chart2"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.8"
    };
  },
  mounted() {
    this.initChart();
    this.initChart2();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          //text: 'Referer of a Website',
          //subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: '一'},
              {value: 735, name: '二'},
              {value: 580, name: '三'},
              {value: 484, name: '四'},
              {value: 300, name: '五'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option);
    },
    initChart2() {
            const chartDom = this.$refs.chart2;
            const myChart = echarts.init(chartDom);

            const option = {
                xAxis: {
                  type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月',
                      '六月', '七月','八月', '九月', '十月', '十一月', '十二月']
                },
              yAxis: {
                  type: 'value'
                },
              series: [
                  {
                      data: [600, 1000, 300, 1700, 2100, 2700, 4100,3400,2300,1700,1000,100],
                    type: 'bar'
                }
              ]
            };

            myChart.setOption(option);
          }
  }
};
</script>

<style scoped lang="scss">
.index {
  width: 100%;
  height: 849px;
  margin-top: 20px;
  margin-left: 20px;

  .count {
    width: 100%;
    height: 250px;
    //background: #1c84c6;
    padding: 25px;
    display: flex;
    justify-content: space-around;

    div {
      width: 300px;
      height: 200px;
      font-size: 25px;
      box-shadow: 0 0 10px rgb(218, 218, 218);
      border-radius: 10%;
      border: rgb(233, 233, 233) 1px solid;
      padding: 20px 40px;
      text-align: right;
      position: relative;

      span {
        color: rgb(127, 131, 137);
      }

      p {
        padding-right: 20px;
        font-size: 40px;
        font-weight: 900;
      }

      img {
        width: 110px;
        height: 110px;
        position: absolute;
        left: 20px;
        top: 60px;
      }
    }
  }

  .image {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;

    div{
      width: 50%;
      height: 75%;
    }
  }
}
</style>

